<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/mobile-header.jsp"%>
<html class="ui-mobile">
<head>
<script type="text/javascript">
        if(is_weixin()){   
            var url = location.href
            if(url.indexOf("MediaApp/lottery/") > 0){

            }else{
                if(url.indexOf(".qq.com") < 1 && url.indexOf("_qq_com") < 1 ){
                    if(url.indexOf("?") < 1){
                        location.href = url+"?.qq.com"
                    }else{
                        location.href = url+"&.qq.com"
                    }
                    
                }
            }            
        } 
        function is_weixin(){
                var ua = navigator.userAgent.toLowerCase();
                if(ua.match(/MicroMessenger/i)=="micromessenger") {
                    return true;
                } else {
                    return false;
                }
        }
</script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
	<title>留言</title>
	<script type="text/javascript" src="/js/jquery.min.js"></script>	<script type="text/javascript" src="http://ecode.yinuoinfo.com/js/jquery.mobile-1.3.0.min.js"></script>	<script type="text/javascript" src="/theme/app_new3_exhibit/js/jquery.slide-packer.js"></script>	<script type="text/javascript" src="/js/img_popup.js"></script>	<script type="text/javascript" src="/theme/app_new3_exhibit/js/idangerous.swiper-2.1.min.js"></script>	<link rel="stylesheet" type="text/css" href="http://ecode.yinuoinfo.com/theme/app_new3_exhibit/css/jquery.mobile-1.3.0.css" />	<link rel="stylesheet" type="text/css" href="http://ecode.yinuoinfo.com/theme/app_new3_exhibit/css/style.css" />	<link rel="stylesheet" type="text/css" href="http://ecode.yinuoinfo.com/theme/app_new3_exhibit/css/ui-slider.css" />	<link rel="stylesheet" type="text/css" href="http://ecode.yinuoinfo.com/theme/app_new3_exhibit/css/idangerous.swiper.css" />	<style>
	#menu_list li{padding:0;border-bottom:1px solid #333;border-top:1px solid #777;height:50px}
	#menu_list li a{font-weight:bold;padding:10px 0;line-height:50px;font-size:17px}
	#menu_list li a:hover div{background:#AC0001}
			.autocut{
	  width:130px;  
	  overflow:hidden;  
	  white-space:nowrap;  
	  text-overflow:ellipsis;  
	  -o-text-overflow:ellipsis;  
	  -icab-text-overflow: ellipsis;  
	  -khtml-text-overflow: ellipsis;  
	  -moz-text-overflow: ellipsis;  
	  -webkit-text-overflow: ellipsis; 
	  
	  }
	</style>
</head>
<body data-theme="lb">
<!-- /page -->
	<div data-role="page" id="main-page" data-title="留言" data-url="demo-page" tabindex="0"  data-theme="p" style="min-height:316px;">
	    <div  data-role='header' data-theme="r" id='header'>
	    			    		<div style='position:absolute;top:0px;left:0px;z-index:10;height:42px;padding-top:8px;padding-left:7px;width:50px;border-right:2px solid #A31114' >
		    			<a href='' data-rel='back' ><img src="${ctxStatic}/site/themes/CanYinFuWu/images/back.png" alt="" /></a>
		    		</div>
	    		<h3 >留言</h3>
	    		    	<div style='width:130px;position:absolute;top:5px;right:5px;z-index:10'>
	    			
					  <a href="javascript:menu()" style='display:inline-block;width:67px;height:37px;background:url(/theme/app_new3_exhibit/img/btn-cd.png);text-align:center;color:#fff;text-decoration:none;font-size:18px;margin-left:57px'><span style='line-height:37px;'>菜单</span></a>
						  <div style='display:none;text-align:center;' id='menu'>
						  
							<div class='triangle'></div>
							<div style='background-color:rgba(50,50,50,0.9);border-radius:5px;box-shadow:0 0 3px #333;'>
							
							  	<ul id='menu_list'>
							  			<li><a class="ui-link" href="${ctxMobileSite }/${project.id}?menuId=1"><div>首 页</div></a></li>
									  	
									  	<li><a class="ui-link" href="${ctxMobileSite }/${project.id}?menuId=2"><div>微会员套餐</div></a></li>

									  	<li><a class="ui-link" href="${ctxMobileSite }/${project.id}?menuId=3"><div>新闻动态</div></a></li>
									  <c:forEach items="${microPages }" var="microPage">
									<li><a class="ui-link" href="${ctxMobileSite }/viewPage/${microPage.id }"><div class="autocut">${microPage.name }</div></a></li>	
									</c:forEach>
							  	</ul>
						  	</div>
						</div>
					<script>
						function menu(){
							$('#menu').toggle()
						}

					</script>
	    	</div>
	    </div><!-- /header -->


	    <div data-role="content"  class="ui-content" role="main">
			
	    	<style type="text/css">
    #contact-form-box{
        padding:10px;
    }
    #contact-form-box .mesg-row{
        margin:10px;
    }
    #contact-form-box form label{
        width:auto;
    }
    #contact-form-box form input{
        width:auto;
        float:none;
        clear:both;
    }
    #contact-form-box form textarea{
        border:1px solid #ccc;
    }
    #contact-form-box .error{
        color:#666;
    }
    #contact-form-box .btn.submit-btn{
      display: inline-block;
      *display: inline;
      padding: 4px 12px;
      margin-bottom: 0;
      *margin-left: .3em;
      font-size: 14px;
      line-height: 20px;
      *line-height: 20px;
      color: #333333;
      text-align: center;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
      vertical-align: middle;
      cursor: pointer;
      background-color: #f5f5f5;
      *background-color: #e6e6e6;
      background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
      background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
      background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
      background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
      background-repeat: repeat-x;
      border: 1px solid #bbbbbb;
      *border: 0;
      border-color: #e6e6e6 #e6e6e6 #bfbfbf;
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
      border-bottom-color: #a2a2a2;
      -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
              border-radius: 4px;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
      filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
      *zoom: 1;
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    #contact-form-box .flash-section{
        color:#f60;
    }
    #contactMessage{
      height:100px;
    }
    label{font-weight:bold!important}
</style>
<div id="contact-form-box">
  <div><img src="${ctxStatic}/site/themes/CanYinFuWu/images/msg.png" style="margin-bottom:-5px" alt="" /><span class='show_title'>在线留言</span></div>
  <div class='title_divi'></div>
    <div class="flash-section">
            </div>
      <div class="contactForm" id="contactForm">

        <form id="contact" method="post">
        <form:form id="inputForm" modelAttribute="guestBook" action="${ctx}/site/saveMessage" method="post" class="form-horizontal">
			<form:hidden path="user.id" />
			<div class="mesg-row">
                    <label for="contactName" id="name_label">姓名</label>
                    <form:input path="openId" htmlEscape="false" class="text-input"/>
                </div>
                <div class="mesg-row">
                    <label for="contactEmail" id="email_label">电话</label>
                    <form:input path="mobile" htmlEscape="false" class="text-input"/>
                </div>
                <div class="mesg-row">
                    <label for="contactMessage" id="message_label">内容</label>
                    <form:textarea path="content" htmlEscape="false" class="text-input"/>
                </div>
                <div class="btn-pic" style='text-align:center;padding-top:10px'>

                    <a href='javascript:sub()' >
                      <img src="${ctxStatic}/site/themes/CanYinFuWu/images/sub_msg.png" alt="" />                    </a>
                   <script>   
                       function sub(){
                        $('#contact').submit();
                       } 
                   </script>

                </div>
        </form:form>
            
                <div class="mesg-row">
                    <input type="hidden" name="data[UserMsg][to]" id="contactName" size="30" value="116077" class="text-input" />
                </div>
                
            
        </form>

    </div>
</div>    

<script type="text/javascript">
    $("form").submit(function(e){
        $("input").each(function(){
            $(this).next().html('');
            if(!$(this).val()){
                $(this).after("<span style=\"color:#f60\">不能为空！</span>");
                e.preventDefault();
            }
        });
    })
</script>











	    </div><!-- /content -->

	</div><!-- /page -->
	<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1>
	</div>




	<script type="text/javascript">
		//关闭全局ajax
		$(document).bind("pageinit", function(){
		    $.mobile.ajaxEnabled = false;
		});
	</script>
</body>
<script type="text/javascript">
    try {

        window.onunload = stay; 
        window.onload = function(){
            autoSize();
            slider_size();
        }

        pageOpen = new Date();//定义一个新的日期对象，记录开始浏览页面时间。  
        function stay() {//定义一个函数。  
            pageClose = new Date();//定义一个新的日期对象，记录结束浏览页面时间。  
            minutes = (pageClose.getMinutes() - pageOpen.getMinutes()); //“分钟”变量等于结束时间的分钟数减去开始时间的分钟数。  
            seconds = (pageClose.getSeconds() - pageOpen.getSeconds());//“秒数”变量等于结束时间的秒数数减去开始时间的秒数数。  
            time = (seconds + (minutes * 60));//时间变量等于“秒数”变量加上“分钟”变量乘以60，即变为以秒记
            send_time(time);
            return time;
        }
        function send_time(time){
            var media_ad_id = '116077';
            var action = 'mesg';

            var url = '/MediaApp/send_duration';
            url = url+'?media_ad_id='+media_ad_id+'&action='+action+'&duration='+time;
            var i = new Image(1,1); 
            i.src= url;
        }

        function autoSize(){
            $("img,iframe,embed").each(function(){
                if($(this).width() > $(this).parent().width() || $(this).width() > $(window).width()){
                    $(this).css('max-width',"100%");
                }
            });
            $("iframe").each(function(){
                var _width = $(this).width();
                if(_width){
                    $(this).css('height',_width);
                }
            })
        }

        // 图片跳转放大
                        $(".ui-content img").click(function(){
                    if(!$(this).parent().attr('href')){
                        window.location.href = $(this).attr('src');
                    }
                });

        //约束轮播图片的比例
        function slider_size(){
            var slider_height = 0;
            slider_height = $(".slider .switchable-box").width()*0.75;
            $(".slider .switchable-box").height(slider_height);
            $(".slider .switchable-content img").height(slider_height); 
        }

    }catch (e) {

    }

    

</script>
</html>